<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <meta name="keywords" content="網頁設計,平面設計,插畫" />
        <meta name="description" content="DFUNS個人網站與美工網頁設計教學,CSS,FLASH" />
        <meta name="copyright" content="本網頁著作權 DFUNS 2000-2010 All Rights Reserved."/>
        <meta name="author" content="DFUNS by Away" />
        <title>=DFUNS™= CSS語法教學-按鈕排列</title>
        <style type="text/css">
            <!--
            * {
                margin: 0px;
                padding: 0px;
            }
            #menu {
                height: 75px;
                width: 660px;
                background-image: url(images/menu_bg.png);
                padding-top: 5px;
                padding-right: 140px;
                padding-left: 0px;
                padding-bottom: 0px;
                border: 1px solid #CCC;
                background-repeat: no-repeat;
                margin-top: 20px;
                margin-right: auto;
                margin-bottom: 20px;
                margin-left: auto;
            }
            #menu h1 {
                margin: 0px;
                padding: 0px;
                float: left;
                width: 200px;
                text-indent: -9999px;
                height: 75px;
                cursor: pointer;
            }
            #menu ul {
                list-style-type: none;
                padding: 0px;
                width: 450px;
                float: right;
                margin: 0px;
            }
            #menu ul li {
                float: left;
                margin-right: 10px;
                background-image: url(images/menu_link.png);
                /*border:1px red dotted ;*/
            }
            #menu ul li a {
                display: block;
                height: 70px;
                width: 100px;
                text-indent: -9999px;
            }
            #menu ul #a1 {
                background-position: 0px 0px;
            }
            #menu ul #a2 {
                background-position: -100px 0px;
            }
            #menu ul #a3 {
                background-position: -200px 0px;
            }
            #menu ul #a4 {
                background-position: -300px 0px;
            }

            #menu ul #a1 a:hover {
                background-image: url(images/menu_link.png);
                background-position: 0px -70px;
            }
            #menu ul #a2 a:hover {
                background-image: url(images/menu_link.png);
                background-position: -100px -70px;
            }
            #menu ul #a3 a:hover {
                background-image: url(images/menu_link.png);
                background-position: -200px -70px;
            }
            #menu ul #a4 a:hover {
                background-image: url(images/menu_link.png);
                background-position: -300px -70px;
            }
            #footer {
                width: 730px;
                margin-right: auto;
                margin-left: auto;
                border: 1px solid #CCC;
                text-align: center;
                padding: 10px;
                height: 50px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 10pt;
            }
            #footer h1 {
                font-size: 2em;
            }


            -->
        </style>
    </head>

    <body>
        <div id="menu">
            <a href="http://www.dfuns.idv.tw"><h1>CSSLayout | www.dfuns.idv.tw</h1></a>
            <ul>
                <li id="a1"><a href="javascript:;">關於我們</a></li>
                <li id="a2"><a href="javascript:;">新聞總覽</a></li>
                <li id="a3"><a href="javascript:;">產品介紹</a></li>
                <li id="a4"><a href="javascript:;">技術專欄</a></li>
            </ul>
        </div>
        <div id="footer">
            <h1>CSS語法教學 │按鈕排列(隱藏文字)│</h1>
            <p>DFUNS教學網範例 = <a href="http://www.dfuns.idv.tw">http://www.dfuns.idv.tw</a> =</p>
        </div>
    </body>
</html>
